<template>  
    <div>  
      <div v-for="item in products" :key="item.id">  
        <h2>{{ item.name }}</h2>  
        <p>{{ item.price }} 元</p>  
        <button @click="addToCart(item)">添加到购物车</button>  
        <button v-if="isInCart(item.id)" @click="adjustQuantity(item.id, 1)">+1</button>  
        <button v-if="isInCart(item.id)" @click="adjustQuantity(item.id, -1)">-1</button>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    computed: {  
      products() {  
        // 这里假设你有一个商品列表数据源  
        return [  
          { id: 1, name: '手机', price: 1000 },  
          { id: 2, name: '电脑', price: 2000 },  
          { id: 3, name: '键盘', price: 200 },  
        ];  
      },  
      isInCart() {  
        return id => this.$store.state.cart.some(item => item.id === id);  
      },  
    },  
    methods: {  
      addToCart(item) {  
        // 检查商品是否已在购物车中，如果不在则添加  
        const isInCart = this.$store.state.cart.some(cartItem => cartItem.id === item.id);  
        if (!isInCart) {  
          this.$store.commit('addToCart', { ...item, quantity: 1 });  
        }  
      },  
      adjustQuantity(id, quantityChange) {  
        // 更新购物车中商品的数量  
        const product = this.$store.state.cart.find(item => item.id === id);  
        if (product) {  
          const newQuantity = Math.max(0, product.quantity + quantityChange);  
          this.$store.commit('updateQuantity', { id, quantity: newQuantity });  
        }  
      },  
      // 假设 addToCart 是一个mutation，但在实际应用中可能需要先检查商品是否存在  
      // 然后使用 updateQuantity mutation 来更新数量  
    },  
  };  
  </script>